class: center, middle, inverse, title-slide .title[ # Introduction to Making Presentation Slides
with Xaringan ] .subtitle[ ## APEC Skill Seminar April 30th 2024 ] .author[ ### Shunkei Kakimoto ] --- class: middle <style type="text/css"> <!-- Font color --> .blue { color: #887ba3; } </style> <style type="text/css"> .remark-slide table:not(.table-unshaded) tr:nth-child(even) { background: transparent; } </style> <style type="text/css"> <!-- center figure --> .center2 { margin: 0; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .small-code .remark-code{ font-size: 50% } .medium-code .remark-code{ font-size: 70% } .xlarge { font-size: 150% } .large { font-size: 130% } .medium { font-size: 80% } .small { font-size: 70% } .xsmall { font-size: 50% } .remark-slide-number { display: inline; } .one-page-font { font-size: 14px; } .remark-slide-content.hljs-github h1 { margin-top: 5px; margin-bottom: 25px; } .remark-slide-content.hljs-github { padding-top: 10px; padding-left: 30px; padding-right: 30px; } .panel-tabs { <!-- color: #062A00; --> color: #841F27; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; padding-bottom: 0px; } .panel-tab { margin-top: 0px; margin-bottom: 0px; margin-left: 3px; margin-right: 3px; padding-top: 0px; padding-bottom: 0px; } .panelset .panel-tabs .panel-tab { min-height: 40px; } .remark-slide th { border-bottom: 1px solid #ddd; } .remark-slide thead { border-bottom: 0px; } .gt_footnote { padding: 2px; } .remark-slide table { border-collapse: collapse; } .remark-slide tbody { border-bottom: 2px solid #666; } .important { background-color: lightpink; border: 2px solid blue; font-weight: bold; } .remark-code { display: block; overflow-x: auto; padding: .5em; background: #ffe7e7; } .remark-code, .remark-inline-code { font-family: 'Source Code Pro', 'Lucida Console', Monaco, monospace;font-size: 90%; } .hljs-github .hljs { background: #f2f2fd; } .remark-inline-code { padding-top: 0px; padding-bottom: 0px; background-color: #e6e6e6; } .r.hljs.remark-code.remark-inline-code{ font-size: 0.9em } .left-full { width: 80%; float: left; } .left-code { width: 38%; height: 92%; float: left; } .right-plot { width: 60%; float: right; padding-left: 1%; } .left6 { width: 60%; height: 92%; float: left; } .left5 { width: 49%; <!-- height: 92%; --> float: left; } .right5 { width: 49%; float: right; padding-left: 1%; } .right4 { width: 39%; float: right; padding-left: 1%; } .left3 { width: 29%; height: 92%; float: left; } .right7 { width: 69%; float: right; padding-left: 1%; } .left4 { width: 38%; float: left; } .right6 { width: 60%; float: right; padding-left: 1%; } ul li{ margin: 7px; } ul, li{ margin-left: 15px; padding-left: 0px; } ol li{ margin: 7px; } ol, li{ margin-left: 15px; padding-left: 0px; } </style> <style type="text/css"> .content-box { box-sizing: border-box; background-color: #e2e2e2; } .content-box-blue, .content-box-gray, .content-box-grey, .content-box-army, .content-box-green, .content-box-purple, .content-box-red, .content-box-yellow { box-sizing: border-box; border-radius: 5px; margin: 0 0 10px; overflow: hidden; padding: 0px 5px 0px 5px; width: 100%; } .content-box-blue { background-color: #F0F8FF; } .content-box-gray { background-color: #e2e2e2; } .content-box-grey { background-color: #F5F5F5; } .content-box-army { background-color: #737a36; } .content-box-green { background-color: #d9edc2; } .content-box-purple { background-color: #e2e2f9; } .content-box-red { background-color: #ffcccc; } .content-box-yellow { background-color: #fef5c4; } .content-box-blue .remark-inline-code, .content-box-blue .remark-inline-code, .content-box-gray .remark-inline-code, .content-box-grey .remark-inline-code, .content-box-army .remark-inline-code, .content-box-green .remark-inline-code, .content-box-purple .remark-inline-code, .content-box-red .remark-inline-code, .content-box-yellow .remark-inline-code { background: none; } .full-width { display: flex; width: 100%; flex: 1 1 auto; } </style> <style type="text/css"> blockquote, .blockquote { display: block; margin-top: 0.1em; margin-bottom: 0.2em; margin-left: 5px; margin-right: 5px; border-left: solid 10px #0148A4; border-top: solid 2px #0148A4; border-bottom: solid 2px #0148A4; border-right: solid 2px #0148A4; box-shadow: 0 0 6px rgba(0,0,0,0.5); /* background-color: #e64626; */ color: #e64626; padding: 0.5em; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .blockquote p { margin-top: 0px; margin-bottom: 5px; } .blockquote > h1:first-of-type { margin-top: 0px; margin-bottom: 5px; } .blockquote > h2:first-of-type { margin-top: 0px; margin-bottom: 5px; } .blockquote > h3:first-of-type { margin-top: 0px; margin-bottom: 5px; } .blockquote > h4:first-of-type { margin-top: 0px; margin-bottom: 5px; } .text-shadow { text-shadow: 0 0 4px #424242; } </style> <style type="text/css"> /****************** * Slide scrolling * (non-functional) * not sure if it is a good idea anyway slides > slide { overflow: scroll; padding: 5px 40px; } .scrollable-slide .remark-slide { height: 400px; overflow: scroll !important; } ******************/ .scroll-box-8 { height:8em; overflow-y: scroll; } .scroll-box-10 { height:10em; overflow-y: scroll; } .scroll-box-12 { height:12em; overflow-y: scroll; } .scroll-box-14 { height:14em; overflow-y: scroll; } .scroll-box-16 { height:16em; overflow-y: scroll; } .scroll-box-18 { height:18em; overflow-y: scroll; } .scroll-box-20 { height:20em; overflow-y: scroll; } .scroll-box-24 { height:24em; overflow-y: scroll; } .scroll-box-30 { height:30em; overflow-y: scroll; } .scroll-output { height: 90%; overflow-y: scroll; } </style> .content-box-green[**NOTE**] Animations are embed in some slides. Please see the HTML format of the slides. <br> .content-box-green[**A Useful tip:**] hitting letter "o" key will give you a panel view of the slides --- class: middle # Today's Outline 1.[Introduction: What is xaringan and Why?](#intro) 2.[Flavor of xaringan slides](#falvor) 3.[How to make presentation slides with xaringan?](#how) 4.[Extensions for xaringan presentations](#extention) <br> **Source materials for this session:** + Xie Allaire et al. (2018) ["R markdown: The definitive guide"](https://bookdown.org/yihui/rmarkdown/#ref-xie2015) --- class: inverse, center, middle name: intro # Introduction: What is xaringan and Why? <html><div style='float:left'></div><hr color='#EB811B' size=1px width=796px></html> --- background-image: url(https://upload.wikimedia.org/wikipedia/commons/b/be/Sharingan_triple.svg) background-size: 90px background-position: 90% 5% class: middle # Sharingan (写輪眼) <br> .center[ .blockquote[ <img src="images/xaringan-2-1.png" width="80%" style="display: block; margin: auto;" /> .right[-- <cite>[Xie (2021), Slide#41](https://slides.yihui.org/xaringan/#41)</cite>] ] ] .pull-left[] .pull-right[<img src="https://media1.tenor.com/m/GeZQuGDMxZEAAAAC/macromatical-rhinoverse.gif" width="350" height="250"/>] ??? + It is funny that a Japanese person, me, talks about this xaringan package. + The name "xaringan" comes from the famous Japanese anime called "Naruto.", which is a anime of ninja. It's so famous that some of you might know the anime. + The name of this cool looking dude is Sasuke, which is the second main character in the anime, + What is the US anime character that matches the relationship between Sasuke and Naruto? + Of course, each character has a unique ability. This guy has a special kind of eyes, and and sharingan is his ability. + The punch line here is that the xarigan presentation has many --- background-image: url(https://presentable-user2021.netlify.app/packages/xaringan/featured-hex.png) background-size: 100px background-position: 90% 8% class: middle ## So, what does xaringan do? .blockquote[ The xaringan package is an R Markdown extension based on the JavaScript library remark.js to generate HTML5 presentations. ] <br> Multiple components are involved to create cool HTML5 slides. -- 1. remark.js (JavaScript
+ Markdown
) -- 2. <b>xaringan</b> connects remark.js to R markdown. --
See [this blog](https://yihui.org/en/2017/08/why-xaringan-remark-js/) for more about *xaringan/ remark.js*. ??? + remark.js is a tools to create slides that can be used in browser. + https://www.verouden.net/slides/presentation-xaringan/#10 + Basically xaringan injected the chakra of R Markdown (minus Pandoc) into remark.js. The slides are rendered by remark.js in the web browser, and the Markdown source needed by remark.js is generated from R Markdown (knitr). --- class: middle ## Why xaringan presentation might be your new tool? I like xaringan presentation mainly because...
You can write everything in R Markdown. --
You can easily incorporate figures and tables created with
and/or
(Python):
Of course, you can create figures and tables within the xaringan .Rmd file.
or, if you have .Rmd file that contains all figures and tables you used in writing your paper, you can directly call those objects by loading the file in the xaringan .Rmd file. <br> ````markdown ```` --- class: middle ### Furthermore... In terms of its functionality,
There are many awesome functionalities in xaringan! For example, `code highlighter` and `clipboard`. For lab session involving coding, these functions are helpful for both instructors and students. --
xaringan slides allow interactive presentations, which potentially make your presentation more fun! ??? + Well there are lots of options to make presentation slides. I think the most common ways is to + We mostly create figures and tables with some --- class: inverse, center, middle name: falvor # Flavor of xaringan presentation <html><div style='float:left'></div><hr color='#EB811B' size=1px width=796px></html> ??? + Well there are tons of useful functionalities in xaringan package. + Here, I would like to introduce the flavor of xaringan presentation with my slides I used for my recitation session. --- class: middle ``` # Header 1 ## Header 2 ### Header 3 + Item 1 + Item 2 **highlighted text** *italic text* .bold[bold text] ``` # Header 1 ## Header 2 ### Header 3 + list 1 + list 2 **highlighted text** *italic text* .bold[bold text] --- class: middle ## Columns and Content color boxes ````markdown .pull-left[ this text is shown in the left column .content-box-blue[text in blue box ...] .content-box-red[text in red box ...] .content-box-gray[text in gray box ...] ] .pull-right[ this text is shown in the right column .content-box-green[text in green box ...] .content-box-yellow[text in yellow box ...] .content-box-purple[text in purple box ...] ] ```` .pull-left[ this text is shown in the left column ] .pull-right[ this text is shown in the right column ] --- class: middle # Math LaTeX commands works fine. For example, <br> .content-box-green[Example 1: Inline equations] ````markdown $\omega_1=(6,10)$ and $\omega_2=(6,0)$ ```` `\(\omega_1=(6,10)\)` and `\(\omega_2=(6,0)\)` <br> .content-box-green[Example 2: Equations] ````markdown $$U_j(x_j, y) = x_j + \theta_j ln \, y$$ ```` `$$U_j(x_j, y) = x_j + \theta_j ln \, y$$` --- class: middle # Math .content-box-green[Example 3: Equations] ````markdown \begin{aligned} \max_{x_1,y_1} \quad & U_1(x_1, y_1)=x_1y_1 \\ \textrm{s.t.} \quad & max[x_2, y_2] = \overline{u_2} \\ & x_1 + x_2 = 16 \\ & y_1 + y_2 = 16 \end{aligned} ```` `\begin{aligned} \max_{x_1,y_1} \quad & U_1(x_1, y_1)=x_1y_1 \\ \textrm{s.t.} \quad & max[x_2, y_2] = \overline{u_2} \\ & x_1 + x_2 = 16 \\ & y_1 + y_2 = 16 \end{aligned}` --- class: middle ## Figures .content-box-green[**Examples: Jensen's inequality**] .panelset[ .panel[.panel-name[Example 1 : g(x) is convex] .left5[ Suppose that `\(g(x)=x^2\)`. .small-code[ ```r set.seed(356) # Create a sequence of X from a uniformal distribution x <- seq(0, 10, by=0.01) # /*===== Convex case: g(X)=X^2 =====*/ y <- x^2 fig_convex <- ggplot() + geom_point(aes(x = x, y = y), size=0.5) + # --- Add E[X] --- # geom_vline( xintercept = mean(x), color = "red", linetype = "dashed" ) + annotate( "text", x = mean(x)+1, y = 0.01, label = paste0("E[X]=", round(mean(x), 1)), size = 3, color = "red" ) + # --- Add horizontal line for E[g(X)]--- # geom_hline( yintercept = mean(y), color="blue", linetype = "dashed" ) + annotate( "text", x = 1, y = mean(y)+5, label = paste0("E[g(X)]=", round(mean(y), 1)), size = 3, color = "blue" ) + # --- Add horizontal line for g(E[X]) --- # geom_hline( yintercept = mean(x)^2, color="darkgreen", linetype = "dashed" ) + annotate( "text", x = 1, y = mean(x)^2-5, label = paste0("g(E(X))=", round(mean(x)^2, 1)), size = 3, color = "darkgreen" ) + theme_bw() ``` ] ] .right5[ <img src="z_presen_files/figure-html/unnamed-chunk-7-1.png" width="100%" style="display: block; margin: auto;" /> `$$\color{darkgreen}{g(E[X])} \leq \color{blue}{E[g(X)]}$$` ] ] .panel[.panel-name[Example 2: g(x) is concave] .left5[ Suppose that `\(g(x)=\sqrt{x}\)`. .small-code[ ```r # /*===== Convex case: g(X)=X^(1/2) =====*/ y <- x^(1/2) figure_ex2 <- ggplot()+ geom_point(aes(x = x, y = y), size=0.5) + # --- Add E[X] --- # geom_vline( xintercept = mean(x), color = "red", linetype = "dashed" ) + annotate( "text", x = mean(x)+0.8, y = 0.01, label = paste0("E[X]=", round(mean(x), 1)), size = 3, color = "red") + # --- Add E[g(X)] --- # geom_hline( yintercept = mean(y), color = "blue", linetype = "dashed" ) + annotate( "text", x = 1, y = mean(y)-0.2, label = paste0("E[g(X)]=", round(mean(y), 2)), size = 3, color = "blue" ) + # --- Add g(E[X]) --- # geom_hline( yintercept = mean(x)^(1/2), color = "darkgreen", linetype = "dashed" ) + annotate( "text", x = 1, y = mean(x)^(1/2)+0.2, label = paste0("g(E(X))=", round(mean(x)^(1/2), 2)), size = 3, color = "darkgreen" ) + theme_bw() ``` ] ] .right5[ <img src="z_presen_files/figure-html/unnamed-chunk-9-1.png" width="100%" style="display: block; margin: auto;" /> `$$\color{blue}{E[g(X)]} \leq \color{darkgreen}{g(E[X])}$$` ] ] ] --- class: middle ## Line highlighting An example of using the trailing comment `#<<` to highlight lines: ### Code .pull-left[ ````markdown ```{r} library(ggplot2) ggplot(mtcars) + aes(mpg, disp) + geom_point() + #<< geom_smooth() #<< ``` ```` ] .pull-right[ ### Output ```r library(ggplot2) ggplot(mtcars) + aes(mpg, disp) + * geom_point() + * geom_smooth() ``` ] --- class: middle ## Figure: Create maps with `leaflet` package
--- class: middle ## Tables For example, regression results look like this. .panelset[ <!-- Panel 1 --> .panel[.panel-name[Code] .medium-code[ ```r library(modelsummary) library(gt) # === Load Data === # url <- 'https://vincentarelbundock.github.io/Rdatasets/csv/HistData/Guerry.csv' dat <- read.csv(url) # === Run regressions === # models <- list( "OLS 1" = lm(Donations ~ Literacy + Clergy, data = dat), "OLS 2" = lm(Crime_pers ~ Literacy + Clergy, data = dat), "OLS 3" = lm(Crime_prop ~ Literacy + Clergy, data = dat) ) ``` ```r # === Report results with modelsummary === # modelsummary( models, fmt = "%.2f", gof_map = c("nobs", "r.squared"), stars = TRUE, notes = list("You can leave a note here"), output = "gt" ) %>% tab_options(table.font.names = "Times New Roman") ``` ] ] <!-- Panel 2 --> .panel[.panel-name[Regression result] .medium-code[
OLS 1
OLS 2
OLS 3
(Intercept)
7948.67***
16259.38***
11243.54***
(2078.28)
(2611.14)
(1011.24)
Literacy
-39.12
3.68
-68.51***
(37.05)
(46.55)
(18.03)
Clergy
15.26
77.15*
-16.38
(25.74)
(32.33)
(12.52)
Num.Obs.
86
86
86
R2
0.020
0.065
0.152
+ p < 0.1, * p < 0.05, ** p < 0.01, *** p < 0.001
You can leave a note here
] ] ] --- class: middle ## Animation with `gganimate` .content-box-green[Example 1: PDF and CDF] <img src="z_presen_files/figure-html/unnamed-chunk-15-1.gif" width="80%" style="display: block; margin: auto;" /> .medium[ `\begin{align*} \color{blue}{CDF}:& \, f(x) = F(x) = Pr(X \leq x) = \int_{-\infty}^x f(t) dt \\ \color{blue}{PDF}:& \, f(x) = \frac{d}{dx}F(x) \quad \text{by definition of PDF} \end{align*}` ] --- class: middle ## Animation with `gganimate` .content-box-green[Example 2: Measurement error bias in linear regression] <img src="z_presen_files/figure-html/unnamed-chunk-16-1.gif" width="100%" style="display: block; margin: auto;" /> --- class: middle .content-box-green[Example 3: Utility maximization problem] `\begin{align} \max_{x_1, y_1} \quad & U_1(x_1, y_1)=x_1 y_1 \\ \textrm{s.t.} \quad & p_x x_1 + p_y y_1 = 4 p_x \end{align}` <img src="z_presen_files/figure-html/unnamed-chunk-17-1.gif" width="80%" style="display: block; margin: auto;" /> --- class: middle # Citations and references You can cite any source from your .bib file via [RefManageR](https://docs.ropensci.org/RefManageR/reference/Cite.html) package. You need to Setup the `BibOptions` at the beginning of your slides like [this](https://github.com/yihui/xaringan/wiki/Bibliography-and-citations). <br> Then, use `Citet` or `Citep` to cite a study. For example, ```r # For inline text citation `r Citet(bib, "xie2022")` created xaringan. ``` Xie (2022) created xaringan. ```r The xaringan package `r Citep(bib, "xie2022")` is an R Markdown extension. ``` The xaringan package (Xie, 2022) is an R Markdown extension. --- class: middle Then, put the following code in the final slides to show all the citations you cited. <br> For example, # References ````markdown Xie, Y. (2021). _Presentation Ninja with xaringan_. URL: [https://slides.yihui.org/xaringan/#1](https://slides.yihui.org/xaringan/#1). Xie, Y. (2022). _Xaringan: Presentation Ninja_. URL: [https://github.com/yihui/xaringan](https://github.com/yihui/xaringan). Xie, Y., J. J. Allaire, et al. (2018). _R markdown: The definitive guide_. Chapman and Hall/CRC. ```` --- class: middle # HTML to PDF slides With `to_pdf` funtion of [renderthis](https://github.com/jhelvy/renderthis) package, you can easily render xaringan HTML slides to pdf slides. For more detail, see [this](https://jhelvy.github.io/renderthis/articles/renderthis.html). ```r # === Install package === # remotes::install_github("jhelvy/renderthis", dependencies = TRUE) # === Get PDF slides from HTML slides === # renderthis::to_pdf( from = here("slides/z_presen.html"), complex_slides = TRUE, partial_slides = TRUE ) ``` --- class: middle, center <img src="https://y.yarn.co/800c72bf-f939-4c9a-acc0-909b6969027a_text.gif" width="600" height="450"/> --- class: inverse, center, middle name: how # How to make presentation slides with xaringan <html><div style='float:left'></div><hr color='#EB811B' size=1px width=796px></html> --- class: middle # Let's create xaringan presentation The most easiest way to start is: 1. Open your RStudio IDE. 2. Go to File → New File → R Markdown → From Template → Ninja Presentation 3. Click the `knit` button on the left corner (or Ctrl+Shift+K) to compile it. .panelset[ <!-- Panel 1 --> .panel[.panel-name[Instatall package] If you haven't installed the packages yet: ```r # === install xaringan === # remotes::install_github("yihui/xaringan") ``` ] <!-- Panel 2 --> .panel[.panel-name[Generate template slides] .left3[ From top-down of New file icon on the left corner, crick <span style="color:blue">R Markdown</span>. Then, <span style="color:blue">From Template</span> → <span style="color:blue">Ninja Presentation</span> ] .right7[ <img src="images/select-xaringan.png" width="80%" style="display: block; margin: auto;" /> ] ] <!-- Panel 3: Knit --> .panel[.panel-name[Compile the file] .left3[ Then, crick the <span style="color:blue">knit</span> button. ] .right7[ <img src="images/knit.png" width="80%" style="display: block; margin: auto;" /> ] ] <!-- Panel 4: Output --> .panel[.panel-name[Output] .left3[ After knitted the file, the slides are popped up. ] .right7[ <img src="images/final-slide.png" width="80%" style="display: block; margin: auto;" /> ] ] ] --- class: middle # Basic components of xaringan slides + YAML header + `---` : for new slides + ???: for presentation notes --- class: middle # YAML header --- class: inverse, center, middle name: extention # Extensions for xaringan presentations <html><div style='float:left'></div><hr color='#EB811B' size=1px width=796px></html> --- background-image: url(https://presentable-user2021.netlify.app/packages/xaringanextra/featured-hex.png) background-size: 100px background-position: 90% 8% class: top, animated slideInRight fadeOutLeft # xaringanExtra <br> `xaringanExtra` package (Check [here](https://pkg.garrickadenbuie.com/xaringanExtra/#/README?id=xaringanextra)) <br> offers extentional functionalities to `xaringan` slides. <br> --- .panelset[ <!-- Panel 1: Tile View--> .panel[.panel-name[Tile View] Press `O` key on the slide below.
] <!-- Panel 2: Panelset --> .panel[.panel-name[Panelset]
] <!-- Panel 3: Clipboard --> .panel[.panel-name[Clipboard]
] <!-- Panel 4: Extra Styles --> .panel[.panel-name[Extra Styles]
] <!-- Panel 5: Animate.css --> .panel[.panel-name[Animate.css]
] ] --- background-image: url(https://presentable-user2021.netlify.app/packages/xaringanthemer/featured-hex.png) background-size: 100px background-position: 90% 8% class: middle, animated slideInLeft fadeOutRight # xariganthemer --- class: middle .content-box-green[**Useful websites for xaringan slides**] 1.The xaringan intro slides: [Presentation Ninja with xaringan](https://slides.yihui.org/xaringan/#1)
Covers the most basics to help you get started 2. [A Bag of R Markdown Tricks](https://slides.yihui.org/2020-genentech-rmarkdown.html#1) Others: [Sharing Your Work with xaringan](https://spcanelon.github.io/xaringan-basics-and-beyond/slides/day-01-basics.html?panelset=xaringan&panelset4=remark.js2&panelset5=nhsrtheme2&panelset6=moon-reader2&panelset7=markdown2#5)